<template>
    <el-table border stripe :data="skuObj.records" style="margin: 10px 0px">
        <el-table-column label="序号" type="index" align="center" width="80">
        </el-table-column>
        <el-table-column label="名称" prop="skuName"> </el-table-column>
        <el-table-column label="描述" prop="skuDesc"> </el-table-column>
        <el-table-column label="默认图片">
            <template #="{ row, $index }">
                <img v-if="row.skuDefaultImg" :src="row.skuDefaultImg" alt="" style="width: 100px; height: 100px" />
                <img v-else src="./1.png" alt="" style="width: 100px; height: 100px; border-radius: 50%" />
            </template>
        </el-table-column>
        <el-table-column label="重量(千克)" prop="weight"> </el-table-column>
        <el-table-column label="价格(元)" prop="price"> </el-table-column>
        <el-table-column label="操作" width="250">
            <template #="{ row, $index }">
                <el-button :type="row.isSale == 0 ? 'success' : 'info'" :icon="row.isSale == 0 ? Top : Bottom"
                    size="small" @click="changeSale(row)"></el-button>
                <el-button type="primary" size="small" :icon="Edit"
                    @click="ElMessage({ type: 'warning', message: '开发中...' })"></el-button>
                <el-button type="info" size="small" :icon="InfoFilled" @click="showSkuInfo(row)"></el-button>
                <el-button type="danger" size="small" :icon="Delete" @click="removeSku(row)"></el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination @current-change="getSkuList" @size-change="sizeHandler" v-model:current-page="currentPage"
        v-model:page-size="pageSize" :page-sizes="[10, 20, 30]" layout="prev, pager, next, jumper,->,sizes,total"
        :total="skuObj.total" background :pager-count="7">
    </el-pagination>

    <!-- 抽屉 
      v-model:控制抽屉显示与隐藏
    -->
    <el-drawer v-model="drawer">
        <el-row :gutter="10">
            <el-col :span="6" style="text-align: right">名称:</el-col>
            <el-col :span="18">{{skuInfo.skuName}}</el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :span="6" style="text-align: right">描述:</el-col>
            <el-col :span="18">{{skuInfo.skuDesc}}</el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :span="6" style="text-align: right; line-height: 15px">价格:</el-col>
            <el-col :span="18">{{skuInfo.price}}</el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :span="6" style="text-align: right; line-height: 42px">平台属性:</el-col>
            <el-col :span="18" style="line-height: 30px">
                <el-tag type="success" v-for="item in skuInfo.skuAttrValueList" :key="item" style="margin-left: 3px">{{
                item.valueName }}</el-tag>
            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :span="6" style="text-align: right; line-height: 42px">销售属性:</el-col>
            <el-col :span="18" style="line-height: 30px">
                <el-tag type="success" v-for="item in skuInfo.skuSaleAttrValueList" :key="item"
                    style="margin-left: 3px">{{ item.saleAttrValueName }}</el-tag>
            </el-col>
        </el-row>
        <el-row>
            <el-col>商品图片:</el-col>
        </el-row>
        <el-row>
            <el-col>
                <!-- 轮播图 -->
                <el-carousel indicator-position="outside" style="height:400px">
                    <el-carousel-item v-for="item in skuInfo.skuImageList" :key="item">
                        <img :src="item.imgUrl" alt="" style="width:100%; height:300px">
                    </el-carousel-item>
                </el-carousel>
            </el-col>
        </el-row>
    </el-drawer>
</template>
  
<script setup lang="ts">
import { ElMessage } from "element-plus";
//引入组合式API
import { ref, onMounted, reactive } from "vue";
//引入请求函数
import { reqSkuList, reqUpdateList, reqDownList, reqSkuInfo, reqDeleteSku } from "../../../api/product/sku/sku";
import {
    Check,
    Delete,
    Edit,
    Message,
    Search,
    Star,
    Plus,
    UploadFilled,
    Top,
    Bottom,
    InfoFilled,
} from "@element-plus/icons-vue";
//当前第几页
let currentPage = ref<number>(1);
//当前数据条数
let pageSize = ref<number>(10);

//存储服务器返回数据
let skuObj = reactive({});

//储存SKU详情的数据
let skuInfo = ref<any>({})

//控制抽屉的显示与隐藏
let drawer = ref<boolean>(false);
//组件挂载完毕获取一次SKU列表
onMounted(() => {
    getSkuList();
});
//封装获取SKU列表接口函数
const getSkuList = async (pager: number = 1) => {
    //修改参数
    currentPage.value = pager;
    let result = await reqSkuList(currentPage.value, pageSize.value);
    //存储服务器返回的数据
    Object.assign(skuObj, result);
};

//上架与下架按钮的回调
const changeSale = async (row) => {
    //切换上架与下架按钮形态
    row.isSale == 0 ? (row.isSale = 1) : (row.isSale = 0);
    //上架与下架请求:携带SKUid,更新完上架与下架之后从新获取SKU最新列表数据
    getSkuList();
    //上架与下架请求:携带SKUid,更新完上架与下架之后从新获取SKU最新列表数据
};
const sizeHandler = () => {
    getSkuList();
};
//抽屉查看详情按钮的回调
const showSkuInfo = async (row) => {
    //抽屉展示
    drawer.value = true;
    //通过SKU的ID获取SKU详情
    let result = await reqSkuInfo(row.id);
    console.log(result);
    skuInfo.value = result
};
//删除SKU
const removeSku = async (row) => {
    try {
        //发请求删除sku
        await reqDeleteSku(row.id);
        getSkuList();
    } catch (error) {

    }
};
</script>
  
<style scoped>
>>>.el-carousel__button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
</style>